<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        data() {
            return {}
        },
        methods: {},
        /**
         *  父模板里调用的数据属性，使用的都是父模板里的数据
         *  子模板里调用的数据属性，使用的都是子模板里的数据
         */
        // 父组件给子组件传递dom元素
        template: `
          <myform>
          <div>提交</div>
          </myform>
          <myform>
          <button>提交</button>
          </myform>
        `
    });
    app.component('myform', {
        methods:{
          handleClick(){
              alert(132)
          }
        },
        template: `
            <div>
                <input />
                <span @click="handleClick">
                   <slot></slot>
                </span>
            </div>
        `
    })
    const vm = app.mount("#app");
</script>
</body>
</html>